import React,{useState,useEffect} from 'react'
import axios from 'axios'
import './App.scss'
import Tap from './components/tap'



function App() {
  let [wen,setwen] = useState([])
  let [bei,setbei] = useState([])
  let [tang,settang] = useState([])
  let [activeindex,setactiveindex] = useState(0)
  let [activeindexs,setactiveindexs] = useState(0)
  let [activeindexss,setactiveindexss] = useState(0)
  useEffect(()=>{
    axios.get("http://localhost:3000/wen").then((res)=>{
      setwen(res.data)
    })
    axios.get("http://localhost:3000/bei").then((res)=>{
      setbei(res.data)
    })
    axios.get("http://localhost:3000/tang").then((res)=>{
      settang(res.data)
    })
  },[])
  return (
    <div>
    {/*杯型*/}
    <div className='da'>
    <div className='name'>杯型</div>
    <Tap data={bei} activeindex={activeindexs} setactiveindex={setactiveindexs}/>
    </div>
    {/*温度*/}
    <div className='da'>
    <div className='name'>温度</div>
      <Tap data={wen} activeindex={activeindex} setactiveindex={setactiveindex}/>
    </div>
      {/*糖度*/}
    <div className='da'>
    <div className='name'>糖度</div>
    <Tap data={tang} activeindex={activeindexss} setactiveindex={setactiveindexss}/>
    </div>
    </div>
  )
}

export default App